import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text,Button,Image } from '@tarojs/components'
import { AtButton,AtCurtain,AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import '../assets/css/active.scss'
import curtainPng from '../assets/images/curtain.png'
export default class Active extends Component {
  constructor (props) {
    super(props)   // ✓ 正确
    this.state = {
      isOpened: false,
      show:false,
      text:'打开弹框'
    }
    this.closemask = this.closemask.bind(this);
  }
  componentWillMount () {
   
   }

  componentDidMount () {
   
  }

  componentWillUnmount () { 
   
  }

  componentDidShow () { }

  componentDidHide () { }
  handleChange () {
    this.setState({
      isOpened: true
    })
  }
  onClose () {
    this.setState({
      isOpened: false
    })
  }
  handlemask = () => {
    this.setState({
        show: true
      }) 
  }
  handleClose =() =>{
      this.closemask() 
  }
  closemask = (type) =>{
    this.setState({
        show: false,
        text:type
      }) 
  }
  handleCancel(){
    this.closemask() 
  }
  handleConfirm(){
    this.closemask() 
  }
  render () {
    return (
      <View className='active'>
            <AtCurtain closeBtnPosition='top-right' isOpened={this.state.isOpened} onClose={this.onClose.bind(this)} >
                <Image
                style='width:100%;height:250px'
                src={curtainPng}
                />
            </AtCurtain>
            <AtButton
                onClick={this.handleChange.bind(this)}>
                右上关闭幕帘
            </AtButton>
            <AtButton type='primary' onClick={this.handlemask}>{this.state.text}</AtButton>  
            <AtModal
                isOpened = {this.state.show}
                title='标题'
                cancelText='取消'
                confirmText='确认'
                onClose={ this.closemask.bind(this,'点击蒙版关闭') }
                onCancel={ this.closemask.bind(this,'关闭') }
                onConfirm={ this.closemask.bind(this,'确认') }
                content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
                />
      </View>
    )
  }
}
